import React, { useEffect, useState } from 'react'
import { Button, ButtonProps, Form, Input, message, Modal, ModalProps, Space } from 'antd'
import { ServerResult, User } from '../../../server/interface';
import { RoleSelect } from '../role/RoleSelect';
import { api_user } from '../../apis';

export interface UserModalProps {
    modalProps?: ModalProps;
    user?: User;
    onOk?: () => void;
    buttonProps?: ButtonProps;
    children?: React.ReactNode;
}
export const UserModal = (props: UserModalProps) => {
    const { buttonProps = {}, modalProps = {}, user, onOk, children } = props;
    const [form] = Form.useForm();
    const [visible, setVisible] = useState(false);
    const isUpdate = !!user?.username;

    useEffect(function () {
        if (visible) {
            if (user) {
                form.setFieldsValue(user);
            } else {
                form.resetFields();
            }
        }
    }, [user, visible])

    const onFinish = () => {
        form.validateFields().then(async (values: User) => {
            let res: ServerResult<any>
            if (isUpdate) {
                res = await api_user.update({ ...values, username: user?.username })
            } else {
                res = await api_user.create([{ ...values }])
            }
            if (res.success) {
                setVisible(false);
                message.success('保存成功');
                onOk?.();
            }
        })
    }

    const title = isUpdate ? '修改' : '创建';
    return <>
        <Button {...buttonProps} onClick={() => setVisible(true)}>{children || title}</Button>
        <Modal {...modalProps}
            title={ title }
            open={visible}
            onCancel={() => setVisible(false)}
            footer={null}
        >
            <Form form={form} onFinish={onFinish} labelCol={{ span: 6 }} wrapperCol={{ span: 16 }} >
                <Form.Item label="用户名" name="username" required rules={[{ required: true, message: '请输入用户名' }]}>
                    <Input placeholder="请输入用户名" disabled={isUpdate} />
                </Form.Item>
                <Form.Item label="姓名" name="nickname" required rules={[{ required: true, message: '请输入姓名' }]}>
                    <Input placeholder="请输入姓名" />
                </Form.Item>
                {!isUpdate && <Form.Item label="密码" name="password" required rules={[{ required: true, message: '请输入密码' }]}>
                    <Input.Password placeholder="请输入密码" />
                </Form.Item>}
                <Form.Item label="角色" name="roles" required rules={[{ required: true, message: '请选择角色' }]}>
                    <RoleSelect mode="multiple" />
                </Form.Item>
                <Form.Item wrapperCol={{ offset: 6, span: 16 }}>
                    <Space>
                        <Button type="primary" htmlType="submit">{title}</Button>
                        <Button onClick={() => setVisible(false)}>取消</Button>
                    </Space>
                </Form.Item>
            </Form>
        </Modal>
    </>
}